<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-4">
    <div class="bg-white rounded-lg shadow-xl p-8 max-w-md w-full transform transition-all duration-500 hover:scale-[1.02]">
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">待办清单应用</h1>
        <p class="text-gray-600">管理你的任务，提高效率</p>
      </div>
      <div class="space-y-4">
        <router-link to="/home" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 text-center">
          开始使用 (访客)
        </router-link>
        <router-link to="/login" class="block w-full bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-6 rounded-lg transition-colors duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-1 text-center">
          登录
        </router-link>
        <router-link to="/register" class="block w-full bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-6 rounded-lg transition-colors duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-1 text-center">
          注册新账户
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.router-link {
  text-decoration: none;
}
</style>
